<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="支付方式">
					<el-select class="w-80" v-model="queryParams.pay_type" placeholder="请选择" clearable filterable>
						<el-option label="全部" :value="0" />
						<el-option label="微信" :value="1" />
						<el-option label="支付宝" :value="2" />
						<el-option label="对公" :value="3" />
					</el-select>
				</el-form-item>
				<el-form-item label="支付状态">
					<el-select class="w-80" v-model="queryParams.pay_status" placeholder="请选择" clearable filterable>
						<el-option label="全部" :value="0" />
						<el-option label="待支付" :value="1" />
						<el-option label="支付中" :value="2" />
						<el-option label="等待确认（对公）" :value="3" />
						<el-option label="已支付" :value="4" />
						<el-option label="支付失败" :value="5" />
					</el-select>
				</el-form-item>
				<el-form-item label="开票状态">
					<el-select class="w-80" v-model="queryParams.invoice_status" placeholder="请选择" clearable filterable>
						<el-option label="全部" :value="0" />
						<el-option label="待开票" :value="1" />
						<el-option label="开票中" :value="2" />
						<el-option label="已开票" :value="3" />
					</el-select>
				</el-form-item>
				<el-form-item label="创建时间">
					<daterange-picker v-model:startTime="queryParams.start_time" v-model:endTime="queryParams.end_time" />
				</el-form-item>
				<el-form-item label="收款单号">
					<el-input class="w-[280px]" v-model="queryParams.sn" clearable />
				</el-form-item>
				<el-form-item label="合作编号">
					<el-input class="w-[280px]" v-model="queryParams.c_sn" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none" shadow="never">
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" prop="id" min-width="50" />
				<el-table-column label="收款单号" prop="sn" min-width="100" />
				<el-table-column label="款项类型" min-width="80">
					<template #default="{ row }"> {{row.type==1?'佣金':''}} </template>
				</el-table-column>
				<el-table-column label="收款金额(元)" prop="actual_money" min-width="120">
					<template #default="{ row }">{{row.actual_money}}</template>
				</el-table-column>
				<el-table-column label="合作服务费(元)" prop="service_fee" min-width="120">
					<template #default="{ row }">{{row.service_fee}}</template>
				</el-table-column>
				<el-table-column label="支付方式" min-width="80">
					<template #default="{ row }"> {{row.pay_type==1?'微信':row.pay_type==2?'支付宝':row.pay_type==3?'对公':''}} </template>
				</el-table-column>
				<el-table-column label="支付状态" min-width="80">
					<template #default="{ row }"> {{row.pay_status==1?'待支付':row.pay_status==2?'支付中':row.pay_status==3?'等待确认（对公）':row.pay_status==4?'已支付':row.pay_status==5?'支付失败':''}} </template>
				</el-table-column>
				<el-table-column label="开票状态" min-width="80">
					<template #default="{ row }"> {{row.invoice_status==1?'待开票':row.invoice_status==2?'开票中':row.invoice_status==3?'已开票':'-'}} </template>
				</el-table-column>
				<el-table-column label="合作编号" min-width="100" prop="c_sn" />
				<el-table-column label="完成时间" prop="pay_time" min-width="120" />
				<el-table-column label="渠道名称" prop="ce_real_name" min-width="100" />
				<el-table-column label="操作" width="160" fixed="right">
					<template #default="{ row }">
						<router-link v-if="row.pay_status != 4" v-perms="['setting.pay.payConfig/commissionOrderDetail']" :to="{ path: getRoutePath('setting.pay.payConfig/commissionOrderDetail'), query: { id: row.id } }">
							<el-button type="primary" link>到账确认</el-button>
						</router-link>
						<el-button v-if="row.invoice_status == 1" v-perms="['setting.pay.payConfig/updateInvoiceStatus']" type="primary" link @click="handleCheck(row.id)">开票</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
		<check_demand v-model:show="checkState.show" @confirm="handleConfirmCheck"></check_demand>
	</div>
</template>
<script lang="ts" setup name="receiptLists">
	import { commissionOrderlists, updateInvoiceStatus } from '@/api/finance';
	import { usePaging } from '@/hooks/usePaging';
	import { getRoutePath } from '@/router';
	import feedback from '@/utils/feedback';
	import { isEmpty } from "@/utils/util";
	import check_demand from './check_demand.vue';
	const queryParams = reactive({
		pay_type: 0,
		pay_status: 0,
		invoice_status: 0,
		start_time: '',
		end_time: '',
		sn: '',
		c_sn: ''
	})

	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: commissionOrderlists,
		params: queryParams
	})
	
	const checkState = reactive({
		show: false,
		id: null
	})
	
	const handleCheck = (id:any) => {
		checkState.show = true
		checkState.id = id
	}
	
	const handleConfirmCheck = async (value : any) => {
		await updateInvoiceStatus({ id: checkState.id, invoice_status: Number(value.invoice_status) });
		checkState.show = false;
		getLists();
	}
	
	onActivated(() => {
		getLists()
	})

	getLists()
</script>